<template>
	<view>
		<!-- <u-navbar title="我的考试"></u-navbar> -->
		<u-tabs :list="list" active-color="#FA541C" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="u-p-20" v-for="(item,index) in exam" :key="index">
			<view class="ebox">
				<view>
					<text style="color: #FA541C;">{{item.isAdopt == 0 ? '【已通过】' : '【未通过】'}}</text>
					{{item.examName}}
				</view>
				<view class="u-flex u-row-between u-m-t-20" style="font-size: 28rpx;">
					<view>共1{{item.questionNumber}}题</view>
					<view>奖励证书：{{item.qualificationName}}</view>
				</view>
				<view class="u-m-t-40">
					<view v-show="item.isShow">
						<view class="u-flex u-m-t-10">
							<view>
								<image  :src="'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/' + item.picture" mode="aspectFit">
								</image>
							</view>
							<view class="u-p-l-20 u-col" style="color: #BFBFBF;font-size: 22rpx; height: 130rpx;width: 100%;">
								<view class="etitle u-line-1 u-col-top">{{item.lessonName}}</view>
								<view class="u-flex u-row-between u-m-t-10">
									<view>
										<u-rate :current="item.starScore"></u-rate>{{item.starScore}}
									</view>
									<view>
										<u-icon label-size="24" label-color="#BFBFBF" :label="item.broadcastNumber" name="eye"></u-icon>
									</view>
								</view>
								<view class="u-flex u-row-between u-m-t-10">
									<view>{{item.studyHour}}学时</view>
									<view>{{item.score}}学分</view>
								</view>
							</view>
						</view>
						<view class="u-m-t-10 u-font-28">
							{{item.examIntroduction}}
						</view>
					</view>
					<view class="eopen" @click="statusClick(index)">
						<u-icon name="arrow-up" label="收起" label-color="#BFBFBF"></u-icon>
						<!-- <u-icon name="arrow-down" label="展开" label-color="#BFBFBF"></u-icon> -->
					</view>
					<view class="u-flex u-row-between u-m-t-20">
						<view class="exall" @click="toExam">考试成绩</view>
						<view class="u-flex">
							<!-- <view>考试练习</view> -->
							<view class="exali u-m-l-20" @click="joinExam(index)">再次考试</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:'',
				exam:[],
				list: [{
					name: '全部'
				}, {
					name: '已通过'
				}, {
					name: '未通过',
				}],
				current: 0,
			}
		},
		onLoad() {
			this.getMyExamRecordInfo(2)
		},
		methods: {
			change(index) {
				this.current = index;
				console.log(index)
				let isPass = index;
				if(index == 0){
					isPass = 2;
				}else {
					isPass = index-1
				}
				this.getMyExamRecordInfo(isPass)
			},
			toExam(){
				uni.navigateTo({
					url: '../exam/exam'
				})
			},
			getMyExamRecordInfo(isPass) {
				console.log(111)
				let isShow = false;
				this.$http.getMyExamRecordInfo(isPass).then(res => {
					res.data.forEach((item)=>{
						item.isShow = isShow;
					})
					this.exam = res.data;
					console.log('exam',this.exam)
				})
			},
			statusClick(index){
				console.log(index)
				this.exam[index].isShow = !this.exam[index].isShow
				console.log(this.exam[index].isShow)
			},
			joinExam(index){
				uni.navigateTo({
					url:`./detail?examId=${this.exam[index].id}&examName=${this.exam[index].examName}&qualificationId=${this.exam[index].qualificationId}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.etitle {
		font-size: 28rpx;
		font-weight: bold;
		color: #262626;
	}

	.exall {
		background: linear-gradient(109.9831065219deg, rgba(255, 171, 57, 1) 0%, rgba(255, 131, 29, 1) 55%, rgba(255, 99, 7, 1) 100%);
		padding: 12rpx 20rpx;
		border-radius: 50rpx;

		text-align: center;
		color: #FFFFFF;
	}

	.exali {
		background: linear-gradient(109.9831065219deg, rgba(246, 158, 151, 1) 0%, rgba(234, 101, 94, 1) 100%);
		padding: 12rpx 20rpx;
		border-radius: 50rpx;

		text-align: center;
		color: #FFFFFF;
	}
	.eopen{
		margin-bottom: 12rpx;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid #BFBFBF;
		width: 100%;
		text-align: center;
		color: #BFBFBF;
		font-size: 24rpx;
	}
	.ebox{
		background-color: #FFFFFF;
		padding: 30rpx 20rpx;
	}
</style>
